<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>container日志查看 </title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<form class="layui-form" >
    <div class="layui-inline">
        <label class="layui-form-label">container</label>
        <div class="layui-input-block layui-form">
            <select name='pod_log' id='pod_log' lay-filter="pod_log" lay-skin="notepad"></select>
        </div>
    </div>
</form>

<div class="layui-card layui-panel-body">
    <div class="layui-card-body">
        <pre class="layui-code" id="container_log">
        </pre>
    </div>
</div>
<script src="/static/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/ace/theme/theme-chrome.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/ace/mode/mode-yaml.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/layui/layui.js"></script>
{% csrf_token %}
<script>
    layui.use(['form', 'jquery'], function () {
        const form = layui.form
            , $ = layui.jquery;
        // select 动态获取内容 设置这里的变量要添加引号
        const namespace = "{{ namespace }}"
        const name = "{{ name }}"
        // websocket 处理函数独立出来，方便多次调用
        function logWebsocket(data){
            const container_name = data;
            const ws = new WebSocket("ws://" + window.location.host + "/ws/log/" + namespace + '/' + name + '/' + container_name);
            ws.onopen = function () {
                // 新链接，清空div里的内容
                document.getElementById("container_log").innerText = ""
            };
            ws.onmessage = function (evt) {
                // 将日志信息显示在页面上
                const log_div = document.getElementById("container_log");
                // Blob 内容需要使用FileReader 读取
                // 参考链接： https://www.geeklive.cn/2023/03/03/javascripts-blob/undefined/javascripts-blob/
                var reader = new FileReader()
                reader.addEventListener('loadend', function (e) {
                    // 输出字符串 {hello: world}
                    log_div.innerHTML += e.target.result
                })
                reader.readAsText(evt.data)
            };
            ws.onclose = function () {
                console.log("websocket closed");
            };
            return false;
        }

        $.ajax({
            url: '{% url "container_api" %}?namespace=' + namespace + '&name=' + name,
            type: "GET",
            async: false,
            success: function (res) {
                let container_select = $("#pod_log")
                if (res.code == 0) {
                    //遍历数据,添加到select选项中
                    $.each(res.data, function (index) {
                        container_select.append('<option value=' + res.data[index] + '>' + res.data[index] + '</option>')
                    })
                    form.render()
                    logWebsocket(res.data[0])
                }
            },
            error: function (res) {
                layer.msg("服务器接口异常")
            }
        })

        form.on('select(pod_log)', function (data) {
            logWebsocket(data.value)
        })
    })
</script>
</body>
</html>